<template>
  <div class="inputType">
    <div>
      <!-- 根据父组件的定义的属性focus是true自动聚焦 -->
      <input
        @blur="handleBlur"
        :class="{ error: !isValid }"
        :type="type"
        :placeholder="placeholder"
        v-model="val"
        v-if="focus"
        v-focus
        @keyup.enter="handleEnter"
      />
      <!-- 其它的不用自动聚焦 -->
      <input
        @blur="handleBlur"
        :class="{ error: !isValid }"
        :type="type"
        :placeholder="placeholder"
        v-model="val"
        v-else
        @keyup.enter="handleEnter"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 输入框的值：双向绑定
      val: "",
      // 判断合法性进行下边框的变化提示
      isValid: true,
    };
  },
  // regular正则表达式
  props: ["type", "placeholder", "regular", "err_msg", "focus"],
  watch: {
    // 监听值变化进行检测
    val() {
      // console.log("变化");
      // 用户无输入强制输入框为合法
      if (!this.val) {
        this.isValid = true;
        // return;
      } else {
        // 根据正则表达式判断输入是否合法
        if (this.regular.test(this.val)) {
          // console.log("合法输入");
          this.isValid = true;
        } else {
          // console.log(this.err_msg);
          this.isValid = false;
        }
      }

      // 将每次输入的数据传输到父组件,子传父
      this.$emit("changeVal", this.val);
    },
  },
  methods: {
    // 处理失焦事件
    handleBlur() {
      if (!this.isValid) {
        // 使用vant-ui组件库的组件提示
        this.$toast.fail(this.err_msg);
      }
    },
    handleEnter() {
      this.$emit("submit");
    },
  },
  directives: {
    focus: {
      inserted(dom) {
        dom.focus();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.inputDom {
  input {
    width: 100%;
    outline: none;
    border: none;
    color: #a8a8a8;
    font-size: 20/360 * 100vw;
    line-height: 50/360 * 100vw;
    margin-bottom: 16/360 * 100vw;
    border-bottom: 1px solid #000;
  }
  .error {
    border-bottom: 1px solid #f00;
  }
}
</style>
